<template>
    <div class="login">
        <div class="login-header">
            <van-nav-bar title="登录页" left-text="返回" left-arrow @click-left="$router.back()" />
        </div>
        <div class="login-content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' },{pattern:/\d{6,12}/,message:'用户名格式不对哦'}]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' },{pattern:/\d{6,12}/,message:'密码格式不对哦'}]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {golonginAPi} from '@/api/login'
import { LS_Pro } from '@/util/storage';
import { useRouter } from 'vue-router';

import { onMounted } from 'vue';
const username=ref<string>('')
const password=ref<string>('')
const router =useRouter()
const onSubmit = async () => {
    let res = await golonginAPi(username.value, password.value)
    if (res.code != 200) return
    LS_Pro.set('token', res.data.token)
    LS_Pro.set('userid', res.data.userid)
    router.push({name:'self'})
  }
</script>

<style scoped lang="scss">
.login {
    .login-header {
        height: 45px;
    }
    .login-content {
        margin-top: 50px;
    }
}
</style>